<script lang="ts" setup>
// #region 引入包, 函数和组件
import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getUserInfoApi } from '@/service' // 获取用户信息

// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const router = useRouter()
// #endregion

// #region // 变量
const imageUrl = ref(
  'https://img0.baidu.com/it/u=3125720667,3310351231&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
)
enum Command {
  USER_SETTING = 'setting',
  LOGOUT = 'logout',
}
const commandFn = {
  [Command.USER_SETTING]() {
    router.push('/setting')
  },
  [Command.LOGOUT]() {
    localStorage.removeItem('token')
    router.push('/login')
  },
}
const userName = ref('') // 用户名
// #endregion

// #region // 函数
const onCommand = (command: Command) => {
  commandFn[command]()
}
const initUserInfo = async () => {
  try {
    const res = await getUserInfoApi()
    // console.log(res)
    userName.value = res.data.values.username
  } catch (error) {
    console.log(error)
  }
}
// #endregion

// #region // 生命周期和vue函数
initUserInfo()

// #endregion
</script>

<template>
  <el-container>
    <el-header>
      <img
        style="width: 100px"
        src="https://cn.element-plus.org/images/element-plus-logo.svg"
        alt="Element logo"
      />
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        router
        :default-active="$route.path"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/list">列表信息</el-menu-item>
        <el-menu-item index="/center">个人中心</el-menu-item>
      </el-menu>
      <el-avatar shape="square" :size="50" fit="cover" :src="imageUrl" />
      <el-dropdown @command="onCommand">
        <span class="el-dropdown-link">
          {{ userName }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="setting">个人设置</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-main>
      <slot></slot>
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.el-header {
  background: #5b83e7;
  display: flex;
  align-items: center;
  & > img {
    filter: brightness(4);
    margin-right: 20px;
  }
  .el-menu {
    background: #5b83e7;
    border: none;
  }
  .el-menu-item {
    border-bottom: 2px solid transparent;
    line-height: 58px;

    &.is-active {
      border-bottom-color: #3667c5;
      background: #fff;
    }
    &:hover {
      color: #333 !important;
    }
  }

  .el-avatar {
    margin-left: auto;
    flex-shrink: 0;
    margin-right: 10px;
  }
  :deep(.el-dropdown .el-dropdown-link) {
    &:focus-visible {
      outline: none;
    }
    &:hover {
      outline: none;
    }
  }
  .el-dropdown {
    color: #000;
  }
}
</style>
